<!-- 评论区 -->
<template>
  <div class="app-container">
    <!-- 评论区区域 -->
    <div>
      <!-- 评论区用户头像区域 -->
      <el-avatar
        src="https://img2.woyaogexing.com/2020/10/22/e42ba052eee6499b90ca7f2d9810d215!400x400.webp"
      ></el-avatar>
      <!-- 评论区输入框区域 -->
      <el-input
        class="type"
        type="textarea"
        minlength="1"
        maxlength="255"
        show-word-limit
        :rows="2"
        placeholder="点评一下吧!"
        v-model="inputComment"
        :autosize="{ minRows: 2, maxRows: 4 }"
      >
      </el-input>
      <!-- 评论区提交评论按钮区域 -->
      <el-button
        type="success"
        icon="el-icon-check"
        circle
        @click="submitComment"
      ></el-button>
    </div>
    <!-- 评论区显示区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>已有条99+条评论</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >赞</el-button
        >
      </div>
      <!-- 评论区每条评论 -->
      <div v-for="item in comment">
        <el-avatar :src="item.avatar"></el-avatar>
        <span> {{ item.content }} </span>
      </div>
    </el-card>
  </div>
</template>

<script>
import commentApi from "@/api/comment/comment";
import contestloginApi from "@/api/contestlogin";

export default {
  data() {
    return {
      // 当前用户信息
      userInfo: {},
      // 所有评论
      comment: [],
      inputComment: "",
      // 添加评论对象
      contestComment: {
        ucenterid: "",
        avatar: "",
        content: "",
      },
    };
  },
  methods: {
    // 发表评论
    submitComment() {
      this.$confirm("确定发布吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.contestComment.ucenterid = this.userInfo.id;
          this.contestComment.avatar = this.userInfo.avatar;
          this.contestComment.content = this.inputComment;
          commentApi.saveComment(this.contestComment).then((response) => {
            if (response.code != 200) this.$message.error("发表评论错误");
            this.inputComment = "";
            this.$message.success("发表评论成功");
            // 刷新评论区
            this.getComment();
          });
        })
        .catch(() => {});
    },
    // 查询所有评论
    getComment() {
      commentApi.getComment().then((response) => {
        if (response.code != 200) this.$message.error("加载评论区错误");
        this.comment = response.data.items;
      });
    },
  },
  created() {
    // 查询所有评论
    this.getComment();
    // 查询当前用户
    contestloginApi
      .getMemberInfo(this.$cookie.get("token"))
      .then((response) => {
        if (response.code !== 200)
          return this.$message.error("加载当前用户失败");
        this.userInfo = response.data.userInfo;
      });
  },
};
</script>
<style scoped>
.el-textarea {
  display: inline-block;
  padding: 8px;
  font-size: 16px;
}
.el-button {
  margin-bottom: 50px;
}
</style>